<template>
  <div class="enroll-list">
    <div class="el-card">
      <div class="card-header">
        <h1>预约报名记录管理系统</h1>
        <div class="header-right">
          <div class="el-tag">总记录数：{{ total }}</div>
        </div>
      </div>
      
      <div class="table-container">
        <div v-if="loading" class="el-loading">
          <div class="el-loading-spinner">
            <svg class="loading-icon" viewBox="0 0 50 50">
              <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle>
            </svg>
            <p>加载中...</p>
          </div>
        </div>
        
        <table class="el-table">
          <thead>
            <tr>
              <th width="80">序号</th>
              <th width="120">姓名</th>
              <th width="150">手机号</th>
              <th width="200">车型</th>
              <th width="200">城市</th>
              <th width="180">报名时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in records" :key="item.id">
              <td class="el-table-column--center">{{ (currentPage - 1) * pageSize + index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.carModel?.fullName || '-' }}</td>
              <td>{{ item.city?.fullName || '-' }}</td>
              <td>{{ item.createTime || '-' }}</td>
            </tr>
            <tr v-if="records.length === 0">
              <td colspan="6" class="el-table__empty-text">暂无数据</td>
            </tr>
          </tbody>
        </table>

        <div class="el-pagination">
          <div class="pagination-info">
            <span>每页 {{ pageSize }} 条</span>
            <span class="separator">|</span>
            <span>共 {{ total }} 条数据</span>
          </div>
          <div class="pagination-buttons">
            <button 
              class="btn-prev"
              :class="{ 'is-disabled': currentPage === 1 }"
              :disabled="currentPage === 1" 
              @click="handlePageChange(currentPage - 1)"
            >
              上一页
            </button>
            <span class="page-number">第 {{ currentPage }} / {{ totalPages }} 页</span>
            <button 
              class="btn-next"
              :class="{ 'is-disabled': currentPage >= totalPages }"
              :disabled="currentPage >= totalPages" 
              @click="handlePageChange(currentPage + 1)"
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnrollList',
  data() {
    return {
      records: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    async fetchEnrollList() {
      try {
        this.loading = true
        const response = await fetch('http://49.232.138.63:8000/webapi/enroll/getByPage', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            page: this.currentPage,
            pageSize: this.pageSize
          })
        })

        const result = await response.json()
        console.log('API返回数据:', result)

        if (result.code === 0) {
          this.records = result.data.list || []
          this.total = result.data.total || 0
          this.currentPage = result.data.page || 1
          this.pageSize = result.data.pageSize || 10
        } else {
          alert('获取数据失败：' + result.message)
        }
      } catch (error) {
        console.error('获取报名记录失败:', error)
        alert('获取数据失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchEnrollList()
    },
    formatDate(timestamp) {
      if (!timestamp) return '-'
      const date = new Date(timestamp)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  },
  created() {
    this.fetchEnrollList()
  }
}
</script>

<style scoped>
.enroll-list {
  min-width: 1000px;
  margin: 0;
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-card {
  flex: 1;
  background: white;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  color: #303133;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #EBEEF5;
  background-color: #F8F8F8;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

h1 {
  font-size: 20px;
  color: #303133;
  margin: 0;
  font-weight: 600;
}

.el-tag {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #e9e9eb;
}

.table-container {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.el-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: #606266;
  border: 1px solid #EBEEF5;
}

.el-table th {
  background-color: #F5F7FA;
  padding: 12px 8px;
  color: #606266;
  font-weight: 600;
  border-bottom: 1px solid #EBEEF5;
  text-align: left;
  position: sticky;
  top: 0;
}

.el-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #EBEEF5;
}

.el-table tr:hover > td {
  background-color: #F5F7FA;
}

.el-table-column--center {
  text-align: center;
}

.el-table__empty-text {
  text-align: center;
  color: #909399;
  padding: 60px 0;
  font-size: 14px;
}

.el-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 13px;
  border-top: 1px solid #EBEEF5;
  margin-top: auto;
  background: white;
}

.pagination-info {
  color: #606266;
}

.separator {
  margin: 0 8px;
  color: #DCDFE6;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-number {
  color: #606266;
}

.btn-prev, .btn-next {
  padding: 0 12px;
  height: 32px;
  background: white;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  color: #606266;
  cursor: pointer;
  transition: all .3s;
  font-size: 13px;
  min-width: 80px;
}

.btn-prev:hover:not(.is-disabled),
.btn-next:hover:not(.is-disabled) {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.is-disabled {
  color: #C0C4CC;
  cursor: not-allowed;
  background-color: #FFF;
}

.el-loading {
  position: relative;
  min-height: 300px;
}

.el-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.loading-icon {
  width: 32px;
  height: 32px;
  color: #409EFF;
  animation: rotate 2s linear infinite;
}

.loading-icon circle {
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
</style> 